<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单击+1，显示奇偶 - 选项式API</title>

</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="Application">
        <span class="counter">
            {{counter}}
            <button @click="increase">+1</button>
        </span>

        <div class="msg-panel">
            <span v-if="showMsg">
                是偶数哦
            </span>
            <span v-else>
                是奇数哦
            </span>
            <button @click="toggleShowCondition">{{showWhenOdd ? '奇数展示' : '偶数展示'}}</button>
        </div>

    </div>
    <script>
        const App = Vue.createApp({
            //组件使用的数据
            data() {
                return {
                    counter: 0,
                    showWhenOdd: true
                }
            },
            //组件使用的方法
            methods: {
                increase() {
                    this.counter++
                },
                toggleShowCondition() {
                    this.showWhenOdd = !this.showWhenOdd;
                }
            },
            //配置组件的计算属性
            computed: {
                showMsg() {
                    return this.counter % 2 === 0
                        ? this.showWhenOdd//偶数
                        : !this.showWhenOdd//奇数
                }
            },
            //组件生命周期函数，组件加载时会调用
            mounted() {
                //https://www.runoob.com/w3cnote/js-random.html
                //页面加载时初始化counter数据，随机生成1-9数
                this.counter = Math.floor(Math.random() * 9);
            }
        })
        App.mount("#Application")
    </script>
    <style scoped>
        #Application {
            text-align: center;
            margin-top: 60px;
        }

        .counter {
            width: 100px;
            height: 100px;
            border: 1px solid;
            padding: 10px;
        }

        .msg-panel {
            width: 100px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid;
            padding: 10px;
        }
    </style>

</body>

</html>